<link rel="stylesheet" href="/assets/home/plugins/mescroll/mescroll.min.css">
<link rel="stylesheet" href="/assets/home/css/order.css">

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">我的订单</h1>
</header>

<div class="tabs">
    <ul>
        <li class="active" data-type="all">全部</li>
        <li data-type="comment">待评价</li>
        <li data-type="finish">已完成</li>
    </ul>
</div>

<div id="order" class="mescroll">
    <div class="list">
    </div>
</div>

<script src="/assets/home/plugins/mescroll/mescroll.min.js"></script>
<script>
    $('.tabs li').click(function () {
        let type = $(this).data('type');

        $(this).addClass('active').siblings().removeClass('active');
        $('#order #' + type).addClass('active').siblings().removeClass('active');
    });

    // 实例化插件
    let meScroll = new MeScroll('order', {
        // 下拉刷新
        down: {
            auto: false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback // 下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        // 上拉加载
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop: { //配置回到顶部按钮
                duration: 600,
                src: "/assets/home/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            }
        }
    });

    async function downCallback() {

        meScroll.resetUpScroll();
        $('#order .list').empty();
        return false;
    }

    async function UpCallback(page) {
        let data = {
            page: page.num,
            limit: page.size,
        }

        let result = await POST({
            url: 'business/order',
            params: data
        });
        console.log(result);

        if (result.code === 1) {
            let list = result.data.list;
            let count = result.data.count;
            //  console.log(list);
            let sub = result.data.subject;
            let thumb_cdn = result.data.thumb_cdn;
            let total = result.data.total;
            let cateid = result.data.cateid;
            let comment = result.data.comment;
            console.log(comment);
            meScroll.endBySize(list.length, count);
            fetchList(list, count, sub, thumb_cdn, cateid, comment);
        } else {
            meScroll.endBySize(0, 0);
            mui.toast(result.msg);
            return false;
        }
    }

    function fetchList(list = [], count, sub, thumb_cdn, cateid, comment) {
        if (list.length > 0 && count > 0) {
            let Item = '';
            let btnTemp = '';

            for (let i = 0; i < list.length; i++) {
                if (list[i].subid == (comment[i] != null ? comment[i].subid : 0)) {
                    btnTemp = `<button class="btn disabled" onclick="ToComment('${list[i].subid}')">已评价</button>`;
                } else {
                    btnTemp = `<button class="btn mui-btn-primary" onclick="ToComment('${list[i].subid}')">评价</button>`
                }
                Item = `
                    <div class="item">
                        <div class="content">
                            <div class="thumb">
                                <img src="${thumb_cdn[i]}" alt="">
                            </div>
                            <div class="info">
                                <div class="code">
                                    <span>订单号：</span>${list[i].code}
                                </div>
                                <div class="name">
                                    <span>课程名称：</span>${sub[i]}
                                </div>
                                <div class="type">
                                    <span>课程分类：</span>${cateid[i]}
                                </div>
                                <div class="price">
                                    <span>课程价格：</span>￥${list[i].total}
                                </div>
                                <div class="time">
                                    <span>购买时间：</span>${list[i].createtime_text}
                                </div>
                            </div>
                        </div>
                
                        <div class="footer">
                            <div class="btn-list">
                            ${btnTemp}
                            </div>
                        </div>
                    </div>
                `;

                $('#order .list').append(Item);
            }
        }
    }

    function ToComment(subid) {
        location.href = `{:url('/home/business/comment')}?subject=${subid}`;
    }
</script>